<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image: url(./blue.jpg);
            width: 100%;
            display: flex;
        }
        div{
            display: none;
            width: 430px;
            height: 270px;
            position: absolute;
            margin-left: 1050px;
            margin-top: 450px;
            background-color: rgb(146, 200, 231);
        }
        .a1{
            width: 265px;
            height: 65px;
            margin-top: 50px;
            margin: auto;
            border-radius: 10px;
            border: 2px solid blue;
            color: black;
            background-color: transparent;
        }
        p{
            margin-top: 30px;
            margin-left: 50px;
        }
        input{
            height: 25px;
        }
        p button{
            width: 85px;
            height: 25px;
            margin-right: 50px;
        }
        div span{
            background-color: aliceblue;
            
        }
    </style>
</head>
<body>
    <button class="a1" onclick="show()">登录</button>
    <div>
        <p>手机号：<input type="text" class="yhm"></p><br>
        <p>验证码：<input type="text" class="yzm"> <span><font></font></span></p><br>
        <p><button onclick="login()">登录</button><button onclick="no()">取消</button></p>
    </div>
</body>
</html>
<script>
    var yhm=document.querySelector('.yhm')
    var yzm=document.querySelector('.yzm')
    var div=document.querySelector('div')
    var span=document.querySelector('span')
    var font=document.querySelector('font')
    function show(){
        div.style.display='block';
    }
    function no(){
        div.style.display='none';
    }
    function getNum(){
        var arr=[]
        for(i=0;i<4;i++){
            var num=Math.floor(Math.random()*(9-0+1)-0);
            arr.push(num)
        }
        return arr.join('')
    }
    var num= getNum()
    font.innerText=num;
    function login(){
        if(yhm.value.trim()==''&&yzm.value.trim()==''){
            alert('用户名或者验证码不能为空')
        }else if(yzm.value.trim()!=num){
            alert('验证码错误')
        }else{
            alert('登录成功')
            location.href='./作业1.html'
        }
        localStorage.setItem('number',JSON.stringify(yhm.value))
    }
    
    
</script>